/* eslint-disable react-hooks/exhaustive-deps */
import {
  DeleteOutlined,
  DownOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  SearchOutlined,
  SyncOutlined,
  UpOutlined,
  RiseOutlined,
  UploadOutlined
} from '@ant-design/icons'
import cookie from 'react-cookies';
import { useRequest } from '@umijs/hooks'
import { Button, Card, Cascader, Col, Drawer, Form, Input, message, Modal, Row, Select, Table, Tag, Upload } from 'antd'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import TableToolbar from '../../../../../components/TableSetting/TableToolbar'
import { getOriginString, getSecretString } from '../../../../../utils/encrypt'
import { downLoad, fetchRequest } from '../../../../../utils/Request'
import { url } from '../../../../../utils/url'

import actionTypes from '../../../actionTypes'
import '../../index.css'

import AddStudentInformation from "./AddStudentInformation";
import EditStudentInformaiton from "./EditStudentInformation";
import { ClassInfo } from "@/components/Information/Index";
import VisualAreaSize from '@/components/VisualAreaSize'
import "./index.less"
import { UploadChangeParam, UploadFile, UploadProps } from 'antd/lib/upload/interface';
import getImgInfo from '@/utils/getImgInfo';
import XLSX from 'xlsx';
import exportExcel from '@/utils/exportExcel';

const { confirm } = Modal;

interface Detail {
  visible: boolean,
  content: any
}

//请求参数
interface RequestParams {
  "deptId": string,//组织机构id
  "studentName": string,//姓名
  "phone": string,//联系电话
  "index": number,//当前页,从0开始
  "num": number//每页的条数
}

interface CheckParams {
  "Id": string

}


export default function EntranceAccessManageTable() {


  //获取redux中的tableData
  const tableData = useSelector((state: any) => {
    // console.log(state.entranceManage.entranceManage)
    // console.log(state.entranceManage.studenttableData);
    return state.entranceManage.studenttableData
  })
  // console.log("table数据")
  // console.log(tableData)
  const [fileList, setFileList] = useState<UploadFile[]>([])
  const { run: uploadAllRun } = useRequest((params) => fetchRequest(url.ADD_ALL_FACE, params), {
    manual: true,
    onSuccess: (result, params) => {
      if (result.success) {
        message.success(result.info)
        setIsModalOpen(false)
      }
      return result
    }
  })

  async function onFileChange(info: UploadChangeParam<UploadFile<any>>) {
    const file = info.file
    setFileList(info.fileList)
    if (file.status === 'done') {
      const response = file.response



      if (!response.success) {
        file.status = 'error'
        file.response = response.error


        setFileList([...info.fileList])
      }
    }
  }




  const columns = [
    {
      title: "姓名",
      dataIndex: "studentName",
      key: 'studentName'
    },
    {
      title: "人员类别",
      dataIndex: "userTypeName",
      key: 'userTypeName',
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: 'sex'
    }, {
      title: "联系电话",
      dataIndex: "phone",
      key: 'phone',
      render: (text: string) => getOriginString(text)
    }, {
      title: "监护人电话",
      dataIndex: "guardianPhone",
      key: 'guardianPhone',

      render: (text: string) => getOriginString(text)
    }, {
      title: "智能学生证卡号",
      dataIndex: "wisdomCardImei",
      key: 'wisdomCardImei'
    }, {
      title: "学号",
      dataIndex: "studentId",
      key: 'studentId'
    }, {
      title: "组织机构",
      dataIndex: "deptName",
      key: 'deptName'
    },
    {
      title: "门禁权限",
      dataIndex: "isHaveAccess",
      key: 'isHaveAccess',
      render: (record: any) => {
        return <span>{record === "1" ? "是" : ""}</span>
      }
    },
    {
      title: "防疫核验",
      // dataIndex: "healthStateName",
      key: 'healthCodeState',
      render: (record: any) => {
        return <Tag color={record.healthCodeColor}>{record.healthCodeState}</Tag>
      }
    },
    {
      title: "防疫核验刷新时间",
      dataIndex: "healthCodeDate",
      key: 'healthCodeDate'
    },
    {
      title: "操作",
      render: (record: any) => <span onClick={e => e.stopPropagation()}>
        <Tag className="tags-hover delete" color="#f50"
          onClick={e => {

            confirm({
              title: '删除',
              icon: <ExclamationCircleOutlined />,
              content: '是否删除该人员',
              okText: '确定',
              okType: 'danger',
              cancelText: '取消',
              onOk() {
                deleteAccess.run({ "userId": record.userId })
              },
              onCancel() {
              },
            })


          }} icon={<DeleteOutlined />}>删除</Tag>

        <Tag className="tags-hover" color="#00BFFF"
          onClick={() => seteditVisible({ visible: true, content: record })}
          icon={<EditOutlined />}>修改</Tag>

      </span>
    }]

  const [requestParams, setrequestParams] = useState<any>({
    deptId: "",
    studentName: "",
    phone: "",
    index: 1,
    num: 10,
    idCard: '',
    userTypeId: '',
    healthState: -1
  })

  const [addVisible, setaddVisible] = useState<boolean>(false)

  const [columnsKey, setcolumnsKey] = useState<any[]>([])

  const [realColumns, setrealColumns] = useState<any[]>([])

  const [editVisible, seteditVisible] = useState<{ visible: boolean, content: any }>({ visible: false, content: null })

  const [form] = Form.useForm()


  function showDeleteConfirm(info: any) {
    Modal.confirm({
      title: '确定删除该学生信息?',
      icon: <ExclamationCircleOutlined />,
      content: info.message,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteAccess.run({
          "studentId": info.studentId
        })
      },
    });
  }

  const checkAccess = useRequest(checkAccessCard, {
    loadingDelay: 200,
    manual: true
  })
  const deleteAccess = useRequest(deleteAccessRequest, {
    loadingDelay: 200,
    manual: true
  })

  //删除的请求函数
  async function deleteAccessRequest(params: any) {
    // console.log(params)
    try {
      const json = await fetchRequest(url.DELETE_STUDENT, params);
      if (json.success) {
        // setrequestParams({...requestParams,})
        message.destroy();
        message.success("删除成功!")
        if (tableData.count > requestParams.num && tableData.count - 1 === requestParams.index * requestParams.num) {
          setrequestParams({ ...requestParams, index: requestParams.index - 1 })
        } else {
          getAccess.run(requestParams)
        }
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }


  //删除的时候判断当前删除的类型
  async function checkAccessCard(params: CheckParams) {
    // console.log(params)
    try {
      const json = await fetchRequest(url.CHECK_ACCESS_CARD_URL, params);
      if (json.success) {
        if (json.IfHaveOtherDept) {
          // setdeleteInfo({ message: json.message, state: 2 })
          showDeleteConfirm({ ...params, message: json.message, state: 2 })
        } else {
          // setdeleteInfo({ message: json.message, state: 1 })
          showDeleteConfirm({ ...params, message: json.message, state: 1 })
        }
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }


  //点击搜索按钮
  function handleFinish(values: any) {
    // console.log("搜索参数")
    // console.log(values)
    setrequestParams({
      deptId: typeof values.deptId === "undefined" ? "" : values.deptId[values.deptId.length - 1],
      studentName: typeof values.userName === "undefined" ? "" : values.userName,
      phone: typeof values.phone === "undefined" ? "" : getSecretString(values.phone),
      idCard: values?.idCard ?? '',
      userTypeId: values.userTypeId,
      index: 1, num: 10,
      healthState: values?.healthState ?? -1
    })
  }

  //点击重置按钮
  function handleReset() {
    form.resetFields();
    setrequestParams({ deptId: "", studentName: "", phone: "", index: 1, num: 10, healthState: -1, userTypeId: '' })
  }


  async function getDeptListRequest() {
    try {
      const json = await fetchRequest(url.GET_DEPARTMENT_URL, "");
      // console.log(json)
      if (json.success) {
        deleteEmpty(json.deptData)
        dispatch({ type: actionTypes.GET_DEPT_TABLE, payload: json.deptData })
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }


  //递归删除空的children
  function deleteEmpty(arr: any[]) {
    arr.map(item => {
      if (item.children.length === 0) {
        delete item.children
      } else {
        deleteEmpty(item.children)
      }
    })
  }

  const getDept = useRequest(getDeptListRequest, {
    loadingDelay: 200
  })

  //获取redux中的tableData
  const deptData = useSelector((state: any) => {
    const data = state.deptManage.deptData
    // console.log(data)
    disableSelect(data)
    return {
      deptData: data
    }
  })
  /**/
  const [isDelete, setIsDelete] = useState(false)
  /*请求批量删除*/
  let depIdList: any[] = []


  const { data, run } = useRequest((ids: number[]) => fetchRequest(url.DELETE_ADDRESS_STUDENT, {
    ids: ids
  }), {
    onSuccess: (result: any) => {
      if (result.success) {
        message.success('删除成功')

      } else {
        message.error(result.error)
      }


    },
    manual: true

  })

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const handleDelete = () => {
    // setIsDelete(!isDelete)
    if (selectedRowKeys.length <= 0) {
      message.error('请选择学生')
      return
    }
    Modal.confirm({
      title: '提示',
      content: '是否批量删除',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await run(selectedRowKeys as number[])
        onRefresh()
        setSelectedRowKeys([])
      }
    });

  }

  const handleUpload = () => {

  }

  /*点击批量删除确定按钮*/
  const handleOk = async () => {
    const depId = depIdList[depIdList.length - 1]
    if (!depId) {
      message.error('请选择组织机构')
      return
    }
    await run(depId)
    onRefresh()
    setIsDelete(!isDelete)


  }
  const onChange = (list: any[]) => {
    depIdList = list

  }

  const DeleteDrawer = (
    <Modal title="批量删除" onCancel={() => setIsDelete(false)} onOk={handleOk} visible={isDelete} destroyOnClose>
      <Row style={{ alignItems: 'center' }}>
        <Col span={4}>组织机构:</Col>
        <Col span={20}>
          <ClassInfo onChange={onChange} isParentSelect={true} />
        </Col>
      </Row>
    </Modal>
  )

  const { data: stateData } = useRequest(() => fetchRequest(url.CODE_STATE, {}))

  function filter(inputValue: string, path: any[]) {
    return path.some(option => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  }

  const stateList = stateData?.data
  const datas = [
    {
      name: '姓名',
      key: 'userName',
      val: <Input className="search-form-item" />
    },
    {
      name: '电话号码',
      key: 'phone',
      val: <Input className="search-form-item" />
    },
    {
      name: '身份证',
      key: 'idCard',
      val: <Input className="search-form-item" />
    },
    {
      name: '所属机构',
      key: 'deptId',
      // val: <TreeSelect  showSearch={false} allowClear  className="search-form-item"
      //     treeData={deptData.deptData}
      //     treeDefaultExpandAll />
      val: <Cascader
        placeholder="所属机构"
        options={deptData.deptData}
        fieldNames={{
          label: 'title', value: 'value', children: 'children'
        }}
        style={{ width: 200 }}

        showSearch={{ filter }}

        changeOnSelect
      />


    },
    {
      name: '人员类型',
      key: 'userTypeId',
      val: <Select className="search-form-item">
        <Select.Option value={1}>学生</Select.Option>
        <Select.Option value={2}>教职人员</Select.Option>
        {/* <Select.Option value={3}>宿管人员</Select.Option> */}
      </Select>
    },
    {
      name: '防疫核验状态',
      key: 'healthState',
      val: <Select className="search-form-item" allowClear>
        {stateList?.map((item: any) => <Select.Option value={item.value}
          key={item.value}>{item.label}</Select.Option>)}
      </Select>
    }
  ]
  const [expand, setExpand] = useState(false);
  const [count, setcount] = useState(expand ? datas.length : 4)
  const [numSpan, setnumSpan] = useState(6)
  let VisuaSize = VisualAreaSize()
  useEffect(() => {
  }, [expand])
  const getFields = () => {
    const children = [];
    for (let i = 0; i < count; i++) {
      children.push(
        <Col span={numSpan} key={i}>
          <Form.Item
            name={datas[i].key}
            label={datas[i].name}
          >
            {datas[i].val}
          </Form.Item>
        </Col>,
      );
    }
    return children;
  };
  const expendClick = () => {
    setExpand(!expand)
    if (expand) {
      if (VisuaSize < 1700 && VisuaSize > 1500) {
        setcount(3)
        setnumSpan(8)
      } else if (VisuaSize > 1700) {
        setcount(4)
        setnumSpan(6)
      } else if (VisuaSize < 1500 && VisuaSize > 1100) {
        setcount(2)
        setnumSpan(12)
      } else if (VisuaSize < 1100) {
        setcount(1)
        setnumSpan(24)
      }
    } else {
      setcount(datas.length)
    }
  }
  useEffect(() => {
    if (VisuaSize < 1700 && VisuaSize > 1500) {
      setcount(3)
      setnumSpan(8)
    } else if (VisuaSize > 1700) {
      setcount(4)
      setnumSpan(6)
    } else if (VisuaSize < 1500 && VisuaSize > 1100) {
      setcount(2)
      setnumSpan(12)
    } else if (VisuaSize < 1100) {
      setcount(1)
      setnumSpan(24)
    }
  }, [VisuaSize])
  // 搜索条件框
  const searchForm = (
    <Card className="search-form"> <Form form={form} layout="inline"
      onFinish={handleFinish} onReset={handleReset}>
      <Row gutter={8} className='leftRow'>{getFields()}</Row>
      <Row gutter={24} className='rightRow'>
        <Col span={24} style={{ textAlign: 'right', width: '270px' }}>
          <Button key="1" type="primary" icon={<SearchOutlined />} htmlType="submit"
            style={{ marginRight: '8px' }}>搜索</Button>
          <Button key="2" icon={<SyncOutlined />} htmlType="reset" style={{ marginRight: '8px' }}>重置</Button>
          <span
            style={{ fontSize: 12, color: "#1153ff" }}
            onClick={expendClick}
          >
            {expand ? <UpOutlined /> : <DownOutlined />} {expand ? "收起" : "展开"}
          </span>
        </Col>
      </Row>
    </Form></Card>
  )
  //查询框
  // const searchForm = (
  //     <Card className="search-form"> <Form form={form} layout="inline"
  //         onFinish={handleFinish} onReset={handleReset}>

  //         <Form.Item className="form-control-item" name="userName" label="姓名">
  //             <Input className="search-form-item" />
  //         </Form.Item>

  //         <Form.Item className="form-control-item" name="phone" label="联系电话">
  //             <Input className="search-form-item" />
  //         </Form.Item>

  //         <Form.Item className="form-control-item" name="idCard" label="身份证">
  //             <Input className="search-form-item" />
  //         </Form.Item>

  //         <Form.Item className="form-control-item" name="deptId" label="所属机构">
  //             <TreeSelect className="search-form-item"
  //                 treeData={deptData.deptData}
  //                 treeDefaultExpandAll />
  //         </Form.Item>

  //         <Form.Item className="form-control-item" name="healthState" label="防疫核验状态">
  //             <Select className="search-form-item" allowClear>
  //                 {stateList?.map((item: any) => <Select.Option value={item.value}
  //                     key={item.value}>{item.label}</Select.Option>)}

  //             </Select>
  //         </Form.Item>

  //         <Form.Item className="form-control-item">
  //             <Button key="1" type="primary" icon={<SearchOutlined />} htmlType="submit"
  //                 style={{ marginRight: '8px' }}>搜索</Button>
  //             <Button key="2" icon={<SyncOutlined />} htmlType="reset" style={{ marginRight: '8px' }}>重置</Button>


  //         </Form.Item>

  //     </Form></Card>)


  const [detail, setDetail] = useState<Detail>({ visible: false, content: null })
  const [isModalOpen, setIsModalOpen] = useState(false);
  const iconColumns = [
    {
      title: '图片名字',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'studentId',
      key: 'studentId',
    },
    {
      title: '姓名',
      dataIndex: 'studentName',
      key: 'studentName',
    },
    {
      title: '年级班级',
      dataIndex: 'studentGrade',
      key: 'studentGrade',
    },
    {
      title: '结果',
      dataIndex: 'res',
      key: 'res',
    },

  ];

  //监听变化
  useEffect(() => {
    const realColumns = columns.filter(item => columnsKey.indexOf(item.key) !== -1)
    setrealColumns(realColumns)
  }, [columnsKey])


  //点击行的时候
  function onRowClick(value: any) {
    // console.log(value)
    setDetail({ visible: true, content: value })
  }

  //当列设置改变的时候
  function onColumnsChange(checkedList: any[]) {
    // console.log(checkedList)
    setcolumnsKey(checkedList)
  }


  //获取门禁人员信息管理的table
  const getAccess = useRequest(getAccessInfo, {
    loadingDelay: 200,
    manual: true
  })

  //监听请求参数的变化 变化之后进行请求
  useEffect(() => {
    getAccess.run(requestParams)
  }, [requestParams])


  //递归修改item的key
  function disableSelect(arr: any[],) {
    // console.log("进入disableselect")
    arr.map(item => {
      // delete item.disabled
      item.key = item.deptID
      item.value = item.deptID
      if (typeof item.children === "undefined" || item.children === null || item.children.length === 0) {
        return;
      } else {
        disableSelect(item.children)
      }
    })
  }


  const dispatch = useDispatch();

  //异步请求的接口
  async function getAccessInfo(params: RequestParams) {
    // console.log("接口请求参数");
    // console.log(params);
    try {
      const json = await fetchRequest(url.GET_STUDENT_TABLE, params);
      if (json.success) {
        dispatch({
          type: actionTypes.GET_STUDENT_INFORMATION_MANAGE_TABLE,
          payload: { data: json.data, count: json.count, total: json.total }
        })
      } else {
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }

  //点击刷新按钮
  function onRefresh() {
    getAccess.run(requestParams)
  }

  //点击新增按钮
  function onAdd() {
    setaddVisible(true)
  }
   //  发送请求 拿到表格数据
   const getAbnormal = async (params: any) => {
    try {
        const json = await fetchRequest(url.GET_STUDENTEXPORT, params);
        if (json.success) {
          leadingOut(json.data)
        } else {
            message.error(json.errorMsg)
        }
    } catch (error: any) {
        message.error(error)
    }
}
const leadingOut = async (importTables:Array<any>) => {
      const data = importTables.map((item: any) => {
          const tempItem = {}
          tempItem['姓名'] = item.studentName
          tempItem['人员类别'] = item.userTypeName
          tempItem['性别'] = item?.sex
          tempItem['联系电话'] = getOriginString(item.phone)
          tempItem['监护人电话'] = getOriginString(item.guardianPhone)
          tempItem['智能学生证卡号'] = item.wisdomCardImei
          tempItem['学号'] = item.studentId
          tempItem['组织机构'] = item.deptName
          tempItem['门禁权限'] = item.isHaveAccess === "1" ? '是' :""
          tempItem['防疫核验'] = item.healthCodeState
          tempItem['防疫核验刷新时间'] = item.healthCodeDate
          return tempItem
      })
      exportExcel(data, '用户信息导出表.xlsx')
}

// 发送表格数据请求传参
const getTableDatas = useRequest(getAbnormal, {
    manual: true,
    loadingDelay: 200
})
  // 点击导出
  const handleExport = () =>{
    getTableDatas.run(requestParams)
  }

  
  //新增成功
  function addSuccess() {
    message.destroy();
    message.success("新增成功!");
    setaddVisible(false);
    getAccess.run(requestParams)
  }

  //新增成功
  function onaddSuccess() {
    message.destroy();
    message.success("修改成功!");
    seteditVisible({ ...editVisible, visible: false });
    getAccess.run(requestParams)
  }
  async function onOk() {
    const index = fileList.findIndex((f) => f.status === 'uploading')
    if (~index) {
      message.error('请等待图片上传完成')
      return
    }

    const errorList = fileList.filter(f => {
      return !f?.response?.success
    }).map((f, i) => ({
      key: i,
      name: f.name,
      error: f.response
    }))





    if (errorList.length === 0) {
      const addStudentFaceDTO = fileList.filter(f => {
        return f?.response?.success
      }).map((f) => {
        console.log(f.response.files[0]);
        const file = f.response?.files?.[0]
        return {
          fileName: file.fileName,
          fileStoreName: file.fileStoreName
        }
      })

      await uploadAllRun({
        addStudentFaceDTO: addStudentFaceDTO
      })


    } else {



    }





    //setIsModalOpen(false)
  }

  //点击分页的时候
  function handlePageChange(page: number, pageSize: number) {

    console.log(page);

    setrequestParams({
      ...requestParams,
      num: pageSize,
      index: page
    })
    setSelectedRowKeys([])
  }
  useEffect(() => {
    setFileList([])
  }, [isModalOpen])

  function downLoadFile() {
    const excelFile = fileList.map(f => {

      const response = f?.response 
      const file = f?.response?.files?.[0]
      return {
        '文件名': f?.name,
        '姓名': file?.studentName,
        '班级': file?.studentGrade,
        '学号': file?.studentId,
        '结果': typeof response === "string" ? response : file?.res,
      }
    })
    exportExcel(excelFile, "结果.xlsx");
  }

  return (
    <div>
      {searchForm}
      {DeleteDrawer}
      <Card className="search-form-table">
        <TableToolbar tableName="学生信息管理表" columns={columns} onColumnsChange={onColumnsChange}
          onRefresh={onRefresh} onAdd={onAdd}>
            <Button icon={<RiseOutlined />} type={'primary'}
            style={{
              margin: '0 10px'
            }}
            onClick={handleExport}
          >导出</Button>
          <Button icon={<DeleteOutlined />} style={{
            color: '#fff',
            borderColor: '#ff4d4f',
            background: '#ff0505',
            // margin: '0 10px'
          }}
            onClick={handleDelete}
          >批量删除</Button>
          <Button icon={<UploadOutlined />}
          style={{marginLeft:'10px'}}
            onClick={() => setIsModalOpen(true)}
          >批量上传人脸</Button>


          <Modal title="批量上传人脸" width={800} maskClosable={false} visible={isModalOpen} onOk={() => setIsModalOpen(false)} onCancel={() => setIsModalOpen(false)} destroyOnClose={true}>
            <Upload multiple listType="picture" maxCount={20} accept=".png, .jpg, .jpeg "
              headers={{ token: cookie.load("collegeToken") }}
              action={url.UPLOAD_ALL}
              onChange={onFileChange}
              fileList={fileList}
            >
              <Button icon={<UploadOutlined />}>上传人脸</Button>
            </Upload>
            <div className="icons">
              <span className='res-btn'>结果：</span>
              <Table dataSource={fileList.map((f, i) => {
                const response = f?.response
                const file = response?.files?.[0]
                console.log(response);

                return {
                  key: i,
                  name: f?.name,
                  studentName: file?.studentName,
                  studentGrade: file?.studentGrade,
                  studentId: file?.studentId,
                  res: typeof response === "string" ? <span className='red'>{response}</span> : file?.res,
                }
              })} columns={iconColumns} pagination={false} />
              <div className="error-btn-wrap">
                <Button onClick={downLoadFile}>下载结果</Button>
              </div>
            </div>
          </Modal>
        </TableToolbar>
        <Table
          loading={getAccess.loading}
          rowSelection={rowSelection}
          pagination={{
            hideOnSinglePage: true, simple: false,
            onChange: handlePageChange,
            total: tableData.total
          }}
          onRow={(record: any) => {
            return { onClick: e => onRowClick(record) }
          }} rowKey={(record: any) => record.userId} columns={realColumns}
          // dataSource={data}
          dataSource={tableData.data}
        />
      </Card>
      <Drawer width="60%" destroyOnClose visible={addVisible} title="新增人员信息" onClose={() => setaddVisible(false)}>
        <AddStudentInformation addSuccess={addSuccess} />
      </Drawer>

      <Drawer width="60%" destroyOnClose visible={editVisible.visible} title="修改人员信息"
        onClose={() => seteditVisible({ ...editVisible, visible: false })}>
        <EditStudentInformaiton info={editVisible.content} onaddSuccess={onaddSuccess} />
      </Drawer>
    </div>
  )
}
